﻿<script setup>

import MyForm from "@/components/MyForm.vue";

import {onMounted, shallowReactive, shallowRef} from "vue";

import {MC_MANAGE_HOST, RULE} from "@/const";

import MyNav from "@/components/MyNav.vue";

import router from "@/router";

import {listApi} from "@/api/DeptApi";

import {getResponseData} from "@/util";

import {updateApi, updatePasswordApi} from "@/api/EmpApi";

import {ElMessage} from "element-plus";

import MyUploader from "@/components/MyUploader.vue";



// 所在部门下拉菜单选项

let deptItems = [];
// 获取当前登录的员工记录

let loginEmp = JSON.parse(sessionStorage.getItem('loginEmp'));



/* ==================== 修改基本信息 ==================== */



// 表单项 + 表单值 + 表单规则

let items = shallowRef([

  {'label': '登录账号', 'prop': 'username', 'span': 12, 'readonly': true},

  {'label': '真实姓名', 'prop': 'realname', 'span': 12},

  {'label': '员工年龄', 'prop': 'age', 'span': 12, 'type': 'number'},

  {'label': '手机号码', 'prop': 'phone', 'span': 12},

  {'label': '微信号码', 'prop': 'wechat', 'span': 12},

  {'label': '电子邮件', 'prop': 'email', 'span': 12},

  {'label': '入职日期', 'prop': 'hiredate', 'type': 'date', 'span': 12},

  {'label': '所在省份', 'prop': 'province', 'span': 12},

  {

    'label': '员工性别', 'prop': 'gender', 'span': 12, 'type': 'select', 'optionItems': [

      {'label': '女孩', 'value': 0},

      {'label': '男孩', 'value': 1},

      {'label': '保密', 'value': 2},

    ]

  },

  {

    'label': '所在部门', 'prop': 'fkDeptId', 'type': 'select', 'optionItems': deptItems, 'span': 12

  },

  {'label': '详细地址', 'prop': 'address', 'type': 'textarea', 'rows': 1},

  {'label': '员工描述', 'prop': 'info', 'type': 'textarea', 'rows': 10},

]);

let data = shallowReactive(loginEmp);

let rules = {

  'username': RULE.USERNAME,

  'password': RULE.PASSWORD,

  'realname': RULE.REALNAME,

  'phone': RULE.PHONE,

  'idcard': RULE.IDCARD,

  'info': RULE.COMMON_INFO,

};



/* ==================== 上传头像 ==================== */

// 上传头像地址

let uploadUrl = shallowRef('http://localhost:8101/api/v1/emp/uploadAvatar?id='+loginEmp['id']);





/* ==================== 修改个人密码 ==================== */

// 表单项 + 表单值 + 表单规则

let updatePasswordItems = shallowRef([

  {

    'label': '原密码', 'prop': 'oldPassword', 'type': 'password', 'required': true,

    'placeholder': '请输入原密码'

  },

  {

    'label': '新密码', 'prop': 'newPassword', 'type': 'password', 'required': true,

    'placeholder': '请输入新密码'

  },

  {

    'label': '确认密码', 'prop': 'rePassword', 'type': 'password', 'required': true,

    'placeholder': '请确认新密码'

  },

]);

let updatePasswordData = shallowReactive({});

let updatePasswordRules = {

  'oldPassword': RULE.PASSWORD,

  'newPassword': [

    {pattern: /^[_a-zA-Z0-9]{4,20}$/, message: '密码须由4到20个字母，数字或下划线组成'},

    {

      validator: (rule, value, callback) => {

        if (value === updatePasswordData['oldPassword']) {

          callback('新旧密码不能相同');

        } else {

          callback();

        }

      }

    }

  ],

  'rePassword': [

    {pattern: /^[_a-zA-Z0-9]{4,20}$/, message: '密码须由4到20个字母，数字或下划线组成'},

    {

      validator: (rule, value, callback) => {

        if (value !== updatePasswordData['newPassword']) {

          callback('两次密码不一致');

        } else {

          callback();

        }

      }

    }

  ],

};



/* ==================== 查询全部的部门记录 ==================== */

async function listDept() {

  let res = await listApi();

  let depts = getResponseData(res);

  Object.values(depts).forEach(dept => {

    deptItems.push({'label': dept['title'], 'value': dept['id']});

  });

}



/* ==================== 修改成功后 ==================== */

function updateSuccess() {

  ElMessage('修改个人信息后需要重新登录！');

  setTimeout(() => router.push('/'), 1000);

}



/* ==================== 加载函数 ==================== */

onMounted(() => listDept());



</script>



<template>



  <my-nav :items="[

    {'icon': 'User', 'label': 'DashBoard', 'url': '/DashBoard'},

    {'icon': 'User', 'label': '修改个人信息'},

  ]"/>



  <el-row :gutter="30" class="personal-update-body">

    <el-col :span="16">

      <el-card class="update-card" header="修改基本信息">

        <my-form v-if="deptItems" type="update" :items="items" :data="data" :rules="rules"

                 :api="updateApi" :fn="updateSuccess"/>

      </el-card>

    </el-col>

    <el-col :span="8">

      <el-card class="upload-avatar-card" header="上传个人头像">

        <my-uploader :action="uploadUrl" name="avatarFile"

                     :showFileList="false"

                     :auto-upload="true"

                     :fn="updateSuccess"/>

      </el-card>

      <el-card class="update-password-card" header="修改个人密码">

        <my-form type="update" :items="updatePasswordItems" :data="updatePasswordData"

                 :rules="updatePasswordRules"

                 :api="updatePasswordApi" :fn="updateSuccess"/>

      </el-card>

    </el-col>

  </el-row>



</template>



<style scoped lang="scss">

.personal-update-body {

  margin-top: 10px; // 上外边距

  height: 632px; // 高度

  overflow-y: scroll; // Y轴溢出滚动



  .update-password-card {

    margin-top: 22px; // 上外边距

  }

}

</style>